<template>
  <div ref="towColumns" class="tow-columns" :class="[ {'top-and-bottom-layout' : layout}]">
    <div ref="cLeft" class="left">
      <slot name="left"></slot>
      <div ref="middleLine" class="middle-line">
        <MoreOutlined style="font-size: 16px" />
      </div>
    </div>
    <div ref="cRight" class="right">
      <slot name="right"></slot>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {MoreOutlined} from '@ant-design/icons-vue';
import {onMounted, ref} from "vue";
import _default from "ant-design-vue/es/vc-slick/inner-slider";
const towColumns  = ref();
const cLeft  = ref();
const cRight  = ref();
const middleLine  = ref();

const prop = defineProps({
  leftMaxWith:{
    type:Number,
    default:420,
    required:false
  },
  rightMaxWith:{
    type:Number,
    default:580,
    required:false
  },
  layout:{
    type:Number,
    default:0
  }
})
onMounted(() => {
  dragControllerDiv();
})

// function dragControllerDiv(){
//   const resize = middleLine.value;
//   const left = cLeft.value;
//   const right = cRight.value;
//   const box = towColumns.value;
//
//   console.log(resize)
//   const _this = this;
//   // 鼠标按下事件
//   resize.onmousedown = (e) => {
//     //颜色改变提醒
//     resize.style.background = "#818181";
//
//     const startX = e.clientX;
//
//     // 阻止文字选中
//     e.preventDefault();
//
//     // 鼠标拖动事件
//     document.onmousemove = (e) => {
//
//       resize.left = startX;
//       const endX = e.clientX;
//       //endX - startX = 移动距离
//       let moveLen = resize.left + (endX - startX); //resize.left+移动的距离=左边区域最后的宽度
//       console.log(moveLen)
//
//       const maxT = box.offsetWidth - resize.offsetWidth; // 容器宽度 - 左边区域的宽度 = 右边区域的宽度
//
//       if (moveLen < prop.leftMaxWith) {
//
//         moveLen = 0;
//         // _this.toWatchProblem = true;
//       } else {
//         // _this.toWatchProblem = false;
//       }
//       if (moveLen > maxT - prop.rightMaxWith) moveLen = maxT - prop.rightMaxWith; //右边区域最小宽度
//
//
//       const leftRadio = (moveLen / box.offsetWidth) *100;
//       // resize.style.left = leftRadio + "%";
//       left.style.width = leftRadio + "%"; // 设置左侧区域的宽度
//       right.style.width = (100 - leftRadio) + "%";
//       if (leftRadio < 100) {
//         // _this.toResetWatch = false;
//         right.style.display = "";
//       }
//     };
//     // 鼠标松开事件
//     document.onmouseup =  (evt) => {
//       //颜色恢复
//       resize.style.background = "#d6d6d6";
//       document.onmousemove = null;
//       document.onmouseup = null;
//       resize.releaseCapture && resize.releaseCapture(); //当你不在需要继续获得鼠标消息就要应该调用ReleaseCapture()释放掉
//     };
//     resize.setCapture && resize.setCapture(); //该函数在属于当前线程的指定窗口里设置鼠标捕获
//   };
// }

function dragControllerDiv(){
  const resize = middleLine.value;
  const left = cLeft.value;
  const right = cRight.value;
  const box = towColumns.value;

  //console.log(resize)
  const _this = this;
  // 鼠标按下事件
  resize.onmousedown = (e) => {
    //颜色改变提醒
    resize.style.background = "#818181";

    const startX = e.clientX;

    //一开始距离box的距离 = 左边宽度
    // const startResize =  left.offsetWidth //不包括外边距
    const startResize = left.offsetWidth +
        parseInt(window.getComputedStyle(left).marginLeft) +
        parseInt(window.getComputedStyle(left).marginRight);
    //console.log(left.style.width)
    //console.log(startResize)
    // 阻止文字选中
    e.preventDefault();

    // 鼠标拖动事件
    document.onmousemove = (e) => {

      resize.left = startX;
      const endX = e.clientX;
      //endX - startX = 移动距离
      let moveLen = (endX - startX);
      // console.log(moveLen)
      //startResize+移动的距离=左边区域最后的宽度
      let endLeftWidth = startResize + moveLen;
     // console.log(endLeftWidth)
      // endLeftWidth = Math.min(endLeftWidth,box.offsetWidth)
      const leftRadio = (endLeftWidth / box.offsetWidth) *100;
      // resize.style.left = leftRadio + "%";
      left.style.width = leftRadio + "%"; // 设置左侧区域的宽度
      right.style.width = (100 - leftRadio) + "%";
      if (leftRadio < 100) {
        // _this.toResetWatch = false;
        right.style.display = "";
      }
    };
    // 鼠标松开事件
    document.onmouseup =  (evt) => {
      //颜色恢复
      resize.style.background = "#d6d6d6";
      document.onmousemove = null;
      document.onmouseup = null;
      resize.releaseCapture && resize.releaseCapture(); //当你不在需要继续获得鼠标消息就要应该调用ReleaseCapture()释放掉
    };
    resize.setCapture && resize.setCapture(); //该函数在属于当前线程的指定窗口里设置鼠标捕获
  };
}


</script>

<style lang="scss" scoped>

.tow-columns{
  width: 100%;
  display: flex;
  @media screen and (min-width: 1025px){
    height: 100%;
    .left{
      position: relative;
    }
    .left,.right{
      box-sizing: border-box;
      width: 50%;
      height: 100%;
      //margin: 0 5px;

    }
    .middle-line{
      cursor: col-resize;
      position: absolute;
      right: 0;
      transform: translateX(100%);
      background-color: #d6d6d6;
      z-index: 99;
      width: 10px;
      padding: 10px 5px;
      border-radius: 0 5px 5px 0;
      top: 200px;
      font-size: 32px;
      display: flex;
      justify-content: center;
      align-content: center;
      &:hover{
        background: cyan;
      }
    }

  }

  @media screen and (max-width: 1024px){
    .middle-line{
      display: none;
    }
    flex-direction: column;
    .left{
      overflow-y: visible;
      margin-bottom: 10px;
    }
    .left,.right{
      height: 500px;
      width: 100% !important;
      //margin: 0px;
    }
  }

}

/**
上下布局
 */
.top-and-bottom-layout{
  .middle-line{
    display: none;
  }
  flex-direction: column;
  .left{
    overflow-y: visible;
    margin-bottom: 10px;
  }
  .left,.right{
    height: 500px;
    //width: calc(100%  - 10px) !important;
    //margin:  0 5px;
    width: 100% !important;

  }
}
</style>
